<template>
  <div>
    <el-dialog  title="患者信息" :visible.sync="dialogTableVisible">
      <div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input v-model="queryParam"/>
          </el-col>
          <el-col :span="12">
            <el-button size="small" type="primary" @click="queryPatientData">查询</el-button>
            <el-button size="small" type="primary" @click="()=> {title='新增患者'; this.addDialog = true;this.form = {}}">新建</el-button>
          </el-col>
          <el-col :span="4">

          </el-col>
        </el-row>
      </div>
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        @cell-click="(row, column, cell, event)=>{currentRow=row}"
      >

        <el-table-column
          label="姓名"
          align="center"
          prop="patientName">
        </el-table-column>
        <el-table-column
          label="性别"
          align="center"
          prop="sex">
          <template slot-scope="scope">
            <el-tag
              disable-transitions>{{scope.row.sex ==='1'?'男':'女'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="出生年月"
          align="center"
          prop="birthday">
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogTableVisible = false">取消</el-button>
            <el-button size="small" type="primary" @click="comfirm">确认</el-button>
        </span>
    </el-dialog>
    <el-dialog :visible.sync="addDialog" :title="title" append-to-body width="550px">
      <el-form ref="addForm" :model="form" :rules="rules" size="small" label-width="78px">
        <el-form-item label="姓名" prop="patientName" >
          <el-input v-model="form.patientName" style="width: 420px;" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile" style="width: 420px;" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="form.sex" label="1">男</el-radio>
          <el-radio v-model="form.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="出生年月" prop="birthday">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="form.birthday"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" style="width: 420px;" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="()=> addDialog = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
// "patientId": 3,
//   "patientName": "张三",
//   "sex": "男",
//   "birthday": "",
//   "mobile": "15250987827",
//   "isActive": true,
//   "email": "",
//   "idCard": "",
//   "isPhoneVerification": 0,
//   "nickName": "",
//   "patientCard": "",
//   "orgId": ""
export default {
  props:{
    visible: {
      type: Boolean,
      default: true
    },
  },
  watch: {
    visible (newValue) {
      this.dialogTableVisible = newValue
    },
    dialogTableVisible (newValue) {
      this.$emit('update:visible', newValue)
    },
  },
  data () {
    return {
      dialogTableVisible: this.visible,
      queryParam: '',
      loading: false,
      addDialog: false,
      title: '',
      form:{
        patientName: "",
        sex: "",
        birthday: "",
        mobile: ""
      },
      currentRow: {},
      currentIndex: -1,
      rules: {
        patientName:[
            { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ]
      },
      tableData: []
    }
  },
  mounted(){

  },
  methods:{
    // 确定选择
    comfirm () {
      this.$emit('selectionChange', this.currentRow)
      this.dialogTableVisible = false
    },
    queryPatientData(){
      this.$http('/pds-ui/pds/patients',{       // 还可以直接把参数拼接在url后边
        params:{
          patientName:this.queryParam
        }
      }).then((res)=>{
        this.tableData = res.data.data.records;
      }).catch(function (error) {
        console.log(error);
      });
    },
    handleEdit(index, row){
      this.addDialog = true
      this.currentIndex = index
      this.title = '编辑患者信息'
      this.form = {...row}
    },
    doSubmit(){
      this.$refs.addForm.validate((valid) => {
        if (valid) {
           console.log(this.form)
          if('编辑患者信息' === this.title){
            console.log('currentIndex',this.currentIndex)
            this.tableData.splice(this.currentIndex,1,this.form)
            this.addDialog = false
            return
          }
          let newData = Object.assign(this.form)
          this.tableData.push(newData)
          this.$emit('selectionChange', newData)
          this.addDialog = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>
<style scoped>


</style>
